<rd-header>
  <rd-header-title title-text="Registry details"></rd-header-title>
  <rd-header-content>
    <a ui-sref="portainer.registries">Registries</a> &gt; <a ui-sref="portainer.registries.registry({id: registry.Id})">{{ registry.Name }}</a>
  </rd-header-content>
</rd-header>

<div class="row">
  <div class="col-sm-12">
    <rd-widget>
      <rd-widget-body>
        <form class="form-horizontal">
          <!-- name-input -->
          <div class="form-group">
            <label for="registry_name" class="col-sm-3 col-lg-2 control-label text-left">Name</label>
            <div class="col-sm-9 col-lg-10">
              <input type="text" class="form-control" id="registry_name" ng-model="registry.Name" placeholder="e.g. my-registry" />
            </div>
          </div>
          <!-- !name-input -->
          <!-- registry-url-input -->
          <div class="form-group">
            <label for="registry_url" class="col-sm-3 col-lg-2 control-label text-left">
              Registry URL
              <portainer-tooltip
                position="bottom"
                message="URL or IP address of a Docker registry. Any protocol or trailing slash will be stripped if present."
              ></portainer-tooltip>
            </label>
            <div class="col-sm-9 col-lg-10">
              <input type="text" class="form-control" id="registry_url" ng-model="registry.URL" placeholder="e.g. 10.0.0.10:5000 or myregistry.domain.tld" />
            </div>
          </div>
          <!-- !registry-url-input -->

          <!-- authentication-checkbox -->
          <div class="form-group" ng-if="registry.Type !== RegistryTypes.PROGET">
            <div class="col-sm-12">
              <label for="registry_auth" class="control-label text-left">
                Authentication
                <portainer-tooltip position="bottom" message="Enable this option if you need to specify credentials to connect to this registry."></portainer-tooltip>
              </label>
              <label class="switch" style="margin-left: 20px"> <input type="checkbox" ng-model="registry.Authentication" /><i></i> </label>
            </div>
          </div>
          <!-- !authentication-checkbox -->

          <!-- authentication-credentials -->
          <div ng-if="registry.Authentication">
            <!-- credentials-user -->
            <div class="form-group">
              <label for="credentials_username" class="col-sm-3 col-lg-2 control-label text-left">
                {{ registry.Type === RegistryTypes.ECR ? 'AWS Access Key' : 'Username' }}
              </label>
              <div class="col-sm-9 col-lg-10">
                <input type="text" class="form-control" id="credentials_username" ng-model="registry.Username" />
              </div>
            </div>
            <!-- !credentials-user -->
            <!-- credentials-password -->
            <div class="form-group">
              <label for="credentials_password" class="col-sm-3 col-lg-2 control-label text-left">
                {{ registry.Type === RegistryTypes.ECR ? 'AWS Secret Access Key' : 'Password' }}
              </label>
              <div class="col-sm-9 col-lg-10">
                <input type="password" class="form-control" id="credentials_password" ng-model="formValues.Password" placeholder="*******" />
              </div>
            </div>
            <!-- !credentials-password -->
          </div>
          <!-- !authentication-credentials -->

          <div ng-if="registry.Type == RegistryTypes.QUAY">
            <!-- organisation-checkbox -->
            <div class="form-group">
              <div class="col-sm-12">
                <label class="control-label text-left"> Use organisation registry </label>
                <label class="switch" style="margin-left: 20px"> <input type="checkbox" ng-model="registry.Quay.UseOrganisation" /><i></i> </label>
              </div>
            </div>
            <!-- !organisation-checkbox -->
            <div ng-if="registry.Quay.UseOrganisation">
              <!-- organisation_name -->
              <div class="form-group">
                <label for="organisation_name" class="col-sm-3 col-lg-2 control-label text-left">Organisation name</label>
                <div class="col-sm-9 col-lg-10">
                  <input type="text" class="form-control" id="organisation_name" name="organisation_name" ng-model="registry.Quay.OrganisationName" required />
                </div>
              </div>
              <!-- !organisation_name -->
            </div>
          </div>

          <div ng-if="registry.Type == RegistryTypes.ECR">
            <!-- region -->
            <div class="form-group">
              <label for="registry_region" class="col-sm-3 col-lg-2 control-label text-left">Region</label>
              <div class="col-sm-9 col-lg-10">
                <input type="text" class="form-control" id="registry_region" name="registry_region" placeholder="us-west-1" ng-model="registry.Ecr.Region" required />
              </div>
            </div>
            <div class="form-group" ng-show="registryFormEcr.registry_region.$invalid">
              <div class="col-sm-12 small text-warning">
                <div ng-messages="registryFormEcr.registry_region.$error">
                  <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
                </div>
              </div>
            </div>
            <!-- !region -->
          </div>

          <div class="form-group">
            <div class="col-sm-12">
              <button
                type="button"
                class="btn btn-primary btn-sm"
                ng-disabled="state.actionInProgress || !registry.Name || !registry.URL || (registry.Type == RegistryTypes.QUAY && registry.Quay.UseOrganisation && !registry.Quay.OrganisationName)"
                ng-click="updateRegistry()"
                button-spinner="state.actionInProgress"
              >
                <span ng-hide="state.actionInProgress">Update registry</span>
                <span ng-show="state.actionInProgress">Updating registry...</span>
              </button>
              <a type="button" class="btn btn-default btn-sm" ui-sref="portainer.registries">Cancel</a>
            </div>
          </div>
        </form>
      </rd-widget-body>
    </rd-widget>
  </div>
</div>
